<template>
  <div class="header">
    <div class="header-logo">
      <img
        src="../assets/image/公司标题.png"
        width="100%"
        height="100%"
      >
    </div>
    <div class="header-list">
      <el-menu
        :default-active="selectNumber"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">三汇服务</template>
          <el-menu-item index="2-0">劳务派遣</el-menu-item>
          <el-menu-item index="2-2">农民工安置</el-menu-item>
          <el-menu-item index="2-5">寒暑假工</el-menu-item>
          <el-menu-item index="2-3">实习就业</el-menu-item>
          <el-menu-item index="2-4">单招生</el-menu-item>
          <el-menu-item index="2-1">产线外包</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">合作企业</el-menu-item>
        <el-menu-item index="4">新闻中心</el-menu-item>
        <el-menu-item index="5">关于三汇</el-menu-item>
        <el-menu-item index="6">加入三汇</el-menu-item>
      </el-menu>
    </div>
    <div class="header-menu-icon" :class="isMenuOpen?'on':''">
      <img alt="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" title="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" src="@/assets/image/close.png" v-if="isMenuOpen" @click="isMenuOpen = !isMenuOpen" class="close">
      <img alt="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" title="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" src="@/assets/image/menu.png" v-else @click="isMenuOpen = !isMenuOpen" class="menu">
    </div>
    <div class="header-menu-block" v-if="isMenuOpen">
    </div>
    <transition name="slide">
      <div class="mobile-menu" v-if="isMenuOpen">
        <div class="mobile-menu-item" :class="index=='1'?'on':''" index="1" @click="changeIndex('1')">首页</div>
        <div class="mobile-menu-item service" :class="index.indexOf('2')!=-1?'on':''" @click="isToggle = !isToggle">
          <span>三汇服务</span>
          <img alt="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" title="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" src="@/assets/image/arrowleft-white.png" v-if="isToggle && index.indexOf('2')!=-1">
          <img alt="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" title="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" src="@/assets/image/arrowleft-black.png" v-if="isToggle && index.indexOf('2')==-1">
          <img alt="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" title="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" src="@/assets/image/arrowdown-white.png" v-if="!isToggle && index.indexOf('2')!=-1">
          <img alt="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" title="东莞市三汇人力资源公司，委托招聘，劳务派遣，三汇人力，人力资源服务外包，农民工安置" src="@/assets/image/arrowdown-black.png" v-if="!isToggle && index.indexOf('2')==-1">
          <div class="mobile-menu-item-sub" v-if="isToggle">
            <div class="mobile-menu-item-sub-item" @click="changeIndex('2-0')">劳务派遣</div>
            <div class="mobile-menu-item-sub-item" @click="changeIndex('2-2')">农民工安置</div>
            <div class="mobile-menu-item-sub-item" @click="changeIndex('2-5')">寒暑假工</div>
            <div class="mobile-menu-item-sub-item" @click="changeIndex('2-3')">实习就业</div>
            <div class="mobile-menu-item-sub-item" @click="changeIndex('2-4')">单招生</div>
            <div class="mobile-menu-item-sub-item" @click="changeIndex('2-1')">产线外包</div>
          </div>
        </div>
        <div class="mobile-menu-item" :class="index=='3'?'on':''" index="3" @click="changeIndex('3')">合作企业</div>
        <div class="mobile-menu-item" :class="index=='4'?'on':''" index="4" @click="changeIndex('4')">新闻中心</div>
        <div class="mobile-menu-item" :class="index=='5'?'on':''" index="5" @click="changeIndex('5')">关于三汇</div>
        <div class="mobile-menu-item" :class="index=='6'?'on':''" index="6" @click="changeIndex('6')">加入三汇</div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: {
    selectNumber: String,
  },
  data() {
    return {
      list: ['首页', '三汇服务', '合作企业', '新闻中心', '关于三汇', '加入三汇'],
      isMenuOpen: false,
      index:'1',
      isToggle:false
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.index = key
      if (key === '6') {
        this.$router.push({ 
          path: "/join",
          query: {
            key: this.index
          }
        });
      } else if (key === '5') {
        this.$router.push({ 
          path: "/about" ,
          query: {
            key: this.index
          }
        });
      } else if (key === '1') {
        this.$router.push({ 
          path: "/index",
          query: {
            key: this.index
          }
        });
      } else if (key === '4') {
        this.$router.push({ 
          path: "/news",
          query: {
            key: this.index
          }
        });
      } else if (key === '3') {
        this.$router.push({ 
          path: "/cooperative",
          query: {
            key: this.index
          }
        });
      } else {
        this.$router.push({
          path: "/service",
          query: {
            key: this.index
          }
        });
      }
    },
    changeIndex(index){
      console.log(index)
      this.index = index
      switch(index){
        case '1':
          this.$router.push({ 
            path: "/index",
              query: {
              key: this.index
            }
          });
          break;
        case '3':
          this.$router.push({ 
            path: "/cooperative",
            query: {
              key: this.index
            } 
          });
          break;
        case '4':
          this.$router.push({ 
            path: "/news",
            query: {
              key: this.index
            }
          });
          break;
        case '5':
          this.$router.push({ 
            path: "/about",
            query: {
              key: this.index
            }
          });
          break;
        case '6':
          this.$router.push({ 
            path: "/join",
            query: {
              key: this.index
            }
          });
          break;
        default:
          this.$router.push({
            path: "/service",
            query: {
              key: this.index
            }
          });
          break;
      }
    },
  },
  mounted () {
    console.clear()
    this.index = this.$route.query.key?this.$route.query.key:'1'
  },
}
</script>

<style scoped lang="scss">
.header {
  width: 1200px;
  margin: 0 auto;
  height: 108px;
  cursor: pointer;
  background-color: #fff;
}
.header-logo {
  width: 300px;
  height: 54px;
  margin-top: 27px;
  float: left;
}
.header-list {
  width: 650px;
  background-color: red;
  height: 108px;
  float: right;
}
.header-list-item {
  width: 150px;
  height: 106px;
  float: left;
}
p {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 106px;
  text-align: center;
}
.bottom {
  border-bottom: 2px solid #ff3939;
}
.el-menu.el-menu--horizontal {
  border: 0;
}
.el-menu--horizontal > .el-menu-item{
  height: 108px;
  line-height: 108px;
  font-size: 16px;
}

/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title,
/deep/ .el-menu--horizontal .el-submenu__title{
  height: 108px !important;
  line-height: 108px !important;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #ff3939;
}
.el-menu-item {
  color: rgba(0, 0, 0, 1);
}
/deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #ff3939;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active {
  color: #ff3939;
}
.header-menu-icon{
  display: none
}
@media screen and (max-width: 800px) {
  .header{
    width:100%; 
    height:60px;
    display: flex;
    position: fixed;
    top: 0;
    left:0;
    z-index: 9;
    align-items: center;
    justify-content: space-between;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; 
    .header-logo{
      width:8rem;
      height:auto;
      margin:0;
      margin-left:15px;
      display: flex;
      align-items: center;
    }
    .header-list{
      display: none;
    }
    .header-menu-icon{
      position: fixed;
      right:5px;
      top:7.6px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
      img{
        width:70%;
      }
    }
    .header-menu-block{
      position:fixed;
      top:0;
      overflow: auto;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.7);
      z-index: 99;
    }
    .mobile-menu{
      width:200px;
      position:fixed;
      top:0;
      left:0;
      height: 100%;
      overflow: scroll;
      background:#fff;
      transition: all 0.5s;
      z-index: 100;
      .mobile-menu-item{
        width:100%;
        font-size:1.2rem;
        text-align: center;
        line-height: 3rem;
        color:#333;
        border-bottom:1px solid #333;
        position: relative;
        &:last-child{
          border-bottom:0;
        }
        &.on{
          color:#fff;
          background:#ff3939;
          border-bottom:0;
        }
        >img{
          width:15px;
          height:auto;
          position: absolute;
          top:1.15rem;
          right:10px;
        }
        &.service{
          .mobile-menu-item-sub-item{
            width:100%;
            font-size:0.8rem;
            text-align: center;
            line-height: 2.3rem;
            border-top:1px solid #333;
            position: relative;
            &:last-child{
              border-bottom:0;
            }
          }
          &.on{
            .mobile-menu-item-sub-item{
              border-top:1px solid #fff;
            }
          }
        }
      }
    }
    .slide-enter-active {
      transition: all .5s ease-out;
    }
    .slide-leave-active {
      transition: all .5s ease-out;
    }
    .slide-enter, .slide-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
      transform: translateX(-200px);
    }
  }
}
</style>

